废话不多说，直接上代码：

方式一：

.hpw{
  background-color: black;
  --div-width: calc(100vw / 2);
  width: var(--div-width);
  height: calc(var(--div-width) * .618);
}

此方式有不完美的地方，如目标元素宽度想要跟随父元素的情况不适用，下面祭出终极解决方案:

#container {
	display: inline-block;
	position: relative;
	width: 50%;
}

#dummy {
	padding-top: 70%;
}

#element {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: silver;
}
<div id="container">
	<div id="dummy"></div>
	<div id="element">some text</div>
</div>

调整上面代码中的padding-top的值即可影响id="element"的div的宽高比。